<!DOCTYPE html>
<html>
<head>
	<!-- f9ac113e3bdf5159044876a9d2377249 -->
    <title>贵州移动乡村振兴平台</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="js/Vue.js"></script>
	<script src="js/echarts.min.js"></script>
    <script src="js/echarts-gl.js"></script>
    <script src="js/hunan2.js"></script>
	
	
	
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
		*{
		    margin:0px; 
		    padding:0px;
		  }
		  html,
		  body,
		  #container {
		      margin:0;
		      height: 100%;
		  }
        #main {
            width: 100%; 
			/* height:1200px; */
            /* border:2px solid green; */
			
        }
		*::-webkit-scrollbar {
		  display: none;
		}
		.main-main{
			position: absolute;
			z-index: 1000;
		}
		
		.main-return{
			margin-top: 25px;
			margin-left: 10px;
			height: 30px;
			width: 200px;
			border: 2px solid beige;
			font-size: larger;
			color: beige;
			line-height: 30px;
			text-align: center;
			cursor:pointer
		}
		.main-gif{
			margin-left: 10px;
			margin-top: 20px;
			width: 250px;
		}
		.main-show{
			width: 250px;
			margin-top: 70px;
			margin-left: 20px;
			font-size: 25px;
			color: white;
		}
		
		.main-menu{
			margin-top: 20px;
			margin-left: 20px;
			/* border: 1px solid beige; */
			/* height: 500px; */
			color: white;
		}
		.main-map{
			margin-top: 50px;
			right: 0;
			width: 300px;
			height: 220px;
			/* border: 1px solid beige; */
			position: fixed;
			text-align: center;
			color: beige;
			overflow: auto;
		}
		.main-char{
			right: 0;
			top: 280px;
			width: 300px;
			height: 400px;
			/* border: 1px solid beige; */
			position: fixed;
			text-align: center;
			color: beige;
			/* background-color: #9dcaff; */
		}
		
		.main-chars{
			right: 0;
			top: 630px;
			/* border: 1px solid beige; */
			width: 300px;
			position: fixed;
			color: beige;
			display: flex;
			justify-content:space-around
		}
		.main-logo{
			left: 20px;
			bottom: 0;
			position: fixed;
			text-align: center;
			color: beige;
		}
		.main-li{
			margin-top: 0.625rem;
			cursor:pointer
		}
		.main-buttom{
			height: 40px;
			background-color: #f2c909;
		}
		.effect02{
		  color:#333;
		  background-color: #ddd;
		}
		
    </style>

</head>
<script>
			window._AMapSecurityConfig = {
				securityJsCode: 'd52e662b3da181d922ae7d0939be19ff',
			}
		</script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=d3b6464934c87bbb494d6fff68ba8ab4&plugin=AMap.DistrictSearch,Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>
<body>
<div id="App">
	<div class="main-main">
		<div class="main-map" id="main-map">
			<div style="border:1px  solid beige;margin-top: 10px;margin-right: 10px;">
				
			<el-card class="box-card" style="background-color:rgba(0,0,0,0);box-sizing: border-box;">
			  <div slot="header" class="clearfix">
			    <span class="effect02">贵州</span>
			  </div>
			  
			  <el-carousel :interval="3000" arrow="never" indicator-position="none" height="100px">
			      <el-carousel-item v-for="item in showingw" :key="item.name">
			        <div class="" style="font-size: 14px;color: wheat;">
			        	{{item.name}}
			        </div>
			      </el-carousel-item>
			    </el-carousel>
			</el-card>
			</div>
		</div>
		<div class="main-char" id="main-char" v-show="shows.showchar1">
		</div>
		<div class="main-char" id="main-char-mian" v-show="shows.showchar2">
		</div>
		<div class="main-char" id="main-char-3" v-show="shows.showchar3">
		</div>
		<!-- <div class="main-char" id="main-char-4" v-show="shows.showchar4">
		</div> -->
		<!-- <div class="main-logo">
			<img src="asset/images/yd.png" width="100%">
		</div> -->
		<!-- <div v-if="sname != '贵州'" class="main-return" onclick="er('hunan')">
			返回上一级菜单
		</div> -->
		<div style="position: fixed;">
			
			<div class="main-gif">
				<img src="asset/images/yd.png" width="100%">
			</div>
			<div class="main-show">
				<div id="">
					{{sname}}
				</div>
				<div style="font-size: 15px;">
					{{jwname.value}}
				</div>
				    
			</div>
			<div class="main-menu">
				<ul style="margin-left: 30px;">
					<li v-for="(item,index) in show" class="main-li" @click="sho(item.name)">
						<div v-if="showcolor === item.name" style="color: #17e3ff;">
							{{item.name}}
						</div>
						<div v-else>
							{{item.name}}
						</div>
					</li>
				</ul>
			</div>
			
			<div v-if="sname != '贵州'" class="main-return" onclick="er('hunan')">
				返回上一级菜单
			</div>
		</div>
		
	</div>
	<div id="main" v-if="!showmain"></div>
	<!-- <div id="container"></div> -->
</div>

<script type="text/javascript">
	var offsetHeight = window.screen.height
	document.getElementById('main').style.height=offsetHeight+"px"; //设定定高
	var app_user =new Vue({
		el: '#App',
		data: {
			showmain:false,
			showcolor:false,
			showingw:[
				{name:'贵州省共有6个地级市、3个自治州;10个县级市、50县、11自治县、1特区、16个区，共88个县级政区；832镇、122乡、193民族乡、362街道。总计1509个。 '},
				{name:'贵州境内地势西高东低，自中部向北、东、南三面倾斜，素有“八山一水一分田”之说。全省地貌可概括分为高原、山地、丘陵和盆地四种基本类型'},
				{name:'贵州，简称“黔”或“贵”，是中华人民共和国省级行政区。省会贵阳，地处中国西南内陆地区腹地。是中国西南地区交通枢纽，长江经济带重要组成部分。'}
			],
			shows:{
				showchar1:false,
				showchar2:false,
				showchar3:true,
				showchar4:false
			},
			sname:"贵州",
			jwname:{name:'贵阳市',value:[106.636577,26.653325]},
			show:[{name:'贵阳市',value:[106.636577,26.653325]},
					{name:'六盘水市',value:[105.483429,26.219214]},
					{name:'安顺市',value:[105.954417,26.259252]},
					{name:'遵义市',value:[107.037923,27.728325]},
					{name:'毕节市',value:[105.298589,27.290215]},
					{name:'铜仁市',value:[109.196439,27.737786]},
					{name:'黔南布依族苗族自治州',value:[107.525404,26.266118]},
					{name:'黔西南布依族苗族自治州',value:[104.902461,25.098113]},
					{name:'黔东南苗族侗族自治州',value:[108.822481,27.179902]},]
		},
		created:function(){
			// this.chart = echarts.init(document.getElementById('main'));
			// setInterval(this.changeEch,3000);
			this.begins()
		},
		methods: {
			begins(){
				setInterval(this.changeEch,3000);
			},
			changeEch(){
				if(this.shows.showchar1){
					this.shows.showchar1 = false
					this.shows.showchar2 = true
				}else if(this.shows.showchar2){
					this.shows.showchar2 = false
					this.shows.showchar3 = true
				}else if(this.shows.showchar3){
					this.shows.showchar3 = false
					this.shows.showchar1 = true
				}
			},
			
			sho(de){
				er(de)
			},
			changes(data){
				if(data){
					this.shows.showchar1 = true
					this.shows.showchar2 = false
				}else{
					this.shows.showchar1 = false
					this.shows.showchar2 = true
				}
			}
		}
	})
    var chart = echarts.init(document.getElementById('main'));
	
	
	
    var barData = [
        // {
        // name: '长沙市',
        // value: [112.98228,28.19409]
        // },
        // {
        //     name: '株洲市',
        //     value: [113.15173,27.835806]
        // },
        // {
        //     name: '湘潭市',
        //     value: [112.94405,27.82973]
        // }
    ];
	var sss = 'hunan'
	
	function begin(funname){
		var option = {
		        title: {
		            text: '贵州移动乡村振兴平台',
		            left: 'center',
		            top: 30,
					textStyle: { // 标签的字体样式
					    color: '#f2c909', // 地图初始化区域字体颜色
					    fontSize: 30, // 字体大小
					    opacity: 1, // 字体透明度
					    backgroundColor:'#fff', // 字体背景色
					},
		        },
		
		        geo3D: {
		            map: funname,
		            // 环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 'auto'，在配置有 light.ambientCubemap.texture 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。
		            environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 配置为垂直渐变的背景
		                offset: 0, color: '#00aaff' // 天空颜色
		            }, {
		                offset: 0.7, color: '#0B1B2D' // 地面颜色
		            }, {
		                offset: 1, color: '#0B1B2D' // 地面颜色
		            }], false),
		
		            label: { // 标签的相关设置
		                show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
		distance: 50, // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
		//formatter:, // 标签内容格式器
		                textStyle: { // 标签的字体样式
		                    color: '#000', // 地图初始化区域字体颜色
		                    fontSize: 15, // 字体大小
		                    opacity: 1, // 字体透明度
		                    backgroundColor:'#fff', // 字体背景色
		                },
		            },
		
		            itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
		                color: '#fff', // 地图板块的颜色
		                opacity: 1, // 图形的不透明度 [ default: 1 ]
		                borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
		                borderColor: '#007c8c' // 图形描边的颜色。[ default: #333 ]
		
		
		            },
		            emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
		                label: { // label高亮时的配置
		                    show: true,
		                    textStyle: {
		                        color: '#fff', // 高亮时标签颜色变为 白色
		                        backgroundColor:"rgba(0, 0, 0, 1)",
		                        padding:10,
		                        fontSize: 15, // 高亮时标签字体 变大
		                    }
		                },
		                itemStyle: { // itemStyle高亮时的配置
		                    areaColor: '#66ffff', // 高亮时地图板块颜色改变
		                },
						
		            },
		
		            viewControl: {	// 用于鼠标的旋转，缩放等视角控制。
		                projection: 'perspective',	// 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
		                autoRotate: true,	// 是否开启视角绕物体的自动旋转查看。[ default: false ]
		                autoRotateDirection: 'cw',	// 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
		                autoRotateSpeed: 10,	// 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
		                autoRotateAfterStill: 3,	// 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
		                damping: 0,	// 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
		                rotateSensitivity: 1,	// 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
		                zoomSensitivity: 1,	// 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
		                panSensitivity: 1,	// 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
		                panMouseButton: 'left',	// 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
		                rotateMouseButton: 'left',	// 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
		
		                distance: 140,	// [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
		                minDistance: 40,	// [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
		                maxDistance: 400,	// [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
						
		                alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
		                beta: 15,	// 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
		                minAlpha: -360,	// 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
		                maxAlpha: 360,	// 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
		                minBeta: -360,	// 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
		                maxBeta: 360,	// 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
		
		                center: [0,0,0],	// 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
		
		                animation: true,	// 是否开启动画。[ default: true ]
		                animationDurationUpdate: 1000,	// 过渡动画的时长。[ default: 1000 ]
		                animationEasingUpdate: 'cubicInOut'	// 过渡动画的缓动效果。[ default: cubicInOut ]
		            },
		
		            light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
		                main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
		                    // color: '#fff', //主光源的颜色。[ default: #fff ]
		                    intensity: 1, //主光源的强度。[ default: 1 ]
		                    shadow: true, //主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
		//shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
		                    alpha: 150, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
		                    beta: 70 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
		                },
		                ambient: { // 全局的环境光设置。
		                    color: '#fff', // 环境光的颜色。[ default: #fff ]
		                    intensity: 0.5 // 环境光的强度。[ default: 0.2 ]
		                }
		            },
		            groundPlane: {
		                show: true,
		                color:"#313B54"
		            },
		            // postEffect: {
		            //     enable: false
		            // },
		
		            // tooltip : {	// 提示框
		            //     trigger : 'item',
		            //     formatter : 'b'
		            // }
		        },
		
		        series: [
		            {
		                type: 'bar3D',
		                coordinateSystem: 'geo3D',
		                bevelSize: 0,
		                itemStyle: {
		                    color: '#17e3ff',
		                    opacity: 1,
		
		                },
		                label: {
		                    show: false,
		                },
		                emphasis:{
		                    label: {
		                        show: true,
		                        // position: 'top',
		                        distance : 2,
		                        formatter:function (params) {
		                            return params.name+":"+params.value[2]
		                        },
		                        textStyle: {
		                            color: '#000'
		                        }
		                    },
		                },
		                // tooltip : {	// 提示框
		                //     trigger : 'item',
		                //     formatter : 'a'
		                // },
		                shading: 'lambert',
		                data: barData,
		            }
		        ]
		    };
			
			return option
	}
    
	let sshh = begin('hunan')
    chart.setOption(sshh)
	
    chart.on('click', function (params) {
		if(params.name === '贵阳市' || params.name === '遵义市' || params.name === '六盘水市' || params.name === '安顺市' || params.name === '黔西南布依族苗族自治州' || params.name === '黔东南苗族侗族自治州' || params.name === '黔南布依族苗族自治州'  || params.name === '铜仁市' || params.name === '毕节市'){
			app_user.$data.sname = params.name
			er(params.name)
		}
        // var cout=params.data.name;
		// var subSystem = params.name;
        //window.open('https://www.baidu.com');
        // console.log(params);
		// dispose(params.name)
		// chart = ''
    });
	
	chart.on('mouseover', function (params) {
		app_user.$data.showcolor = params.name
	});
	chart.on('mouseout', function (params) {
		app_user.$data.showcolor = ''
	});
	function er(sss){
		if(sss.name){
			sss = sss.name
		}
		if(sss === 'hunan' || sss === '贵阳市' || sss === '遵义市' || sss === '六盘水市' || sss === '安顺市' || sss === '黔西南布依族苗族自治州' || sss === '黔东南苗族侗族自治州' || sss === '黔南布依族苗族自治州'  || sss === '铜仁市' || sss === '毕节市'){
			if(sss === '贵阳市'){
				app_user.$data.show = [
					// {name:'贵阳市区',value:[106.636577,26.653325]},
					{name:'修文县',value:[106.598492,26.844862]},
					{name:'息烽县',value:[106.747562,27.096475]},
					{name:'清镇市',value:[106.477523,26.561988]},
					{name:'开阳县',value:[106.477523,26.561988]},//value有问题
					{name:'白云区',value:[106.477523,26.561988]},
					{name:'乌当区',value:[106.477523,26.561988]},
					{name:'云岩区',value:[106.477523,26.561988]},
					{name:'南明区',value:[106.477523,26.561988]},
					{name:'小河区',value:[106.477523,26.561988]},
					{name:'花溪区',value:[106.477523,26.561988]},
				]
			}else if(sss === '遵义市'){
				app_user.$data.show = [
					{name:'遵义市区',value:[107.037923,27.728325]},
					{name:'赤水市',value:[105.703489,28.596119]},
					{name:'桐梓县',value:[106.832489,28.139468]},
					{name:'遵义县',value:[106.836504,27.542501]},
					{name:'仁怀市',value:[106.407527,27.797752]},
					{name:'绥阳县',value:[107.197492,27.95308]},
					{name:'湄潭县',value:[107.472599,27.754498]},
					{name:'余庆县',value:[107.91146,27.221379]},
					{name:'正安县',value:[107.460575,28.559092]},
					{name:'习水县',value:[106.203428,28.339118]},
					{name:'道真仡佬族苗族自治县',value:[107.619484,28.86865]},
					{name:'凤冈县',value:[107.723548,27.960695]},
					{name:'务川仡佬族苗族自治县',value:[107.905456,28.569077]},
				]
			}else if(sss === '六盘水市'){
				app_user.$data.show = [
					{name:'六枝特区',value:[105.483429,26.219214]},
					{name:'水城县',value:[104.837555,26.598833]},
					{name:'盘县',value:[104.478582,25.715651]},
				]
			}else if(sss === '安顺市'){
				app_user.$data.show = [
					{name:'普定县',value:[105.748486,26.308233]},
					{name:'镇宁布依族苗族自治县',value:[105.776583,26.063829]},
					{name:'平坝县',value:[106.263584,26.411186]},
					{name:'紫云苗族布依族自治县',value:[106.090414,25.757409]},
					{name:'关岭布依族苗族自治县',value:[105.625476,25.949877]},
					{name:'安顺市区',value:[105.954417,26.259252]},
				]
			}else if(sss === '黔西南布依族苗族自治州'){
				app_user.$data.show = [
					{name:'兴义市',value:[104.902461,25.098113]},
					{name:'兴仁县',value:[105.192568,25.440899]},
					{name:'贞丰县',value:[105.65656,25.392124]},
					{name:'册亨县',value:[105.818511,24.989637]},
					{name:'普安县',value:[104.959546,25.789952]},
					{name:'晴隆县',value:[105.225484,25.841048]},
					{name:'安龙县',value:[105.449543,25.10399]},
					{name:'望谟县',value:[106.106445,25.184355]},
				]
			}else if(sss === '黔东南苗族侗族自治州'){
				app_user.$data.show = [
					{name:'岑巩县',value:[108.822481,27.179902]},
					{name:'黄平县',value:[107.923548,26.911289]},
					{name:'凯里市',value:[107.987469,26.573079]},
					{name:'施秉县',value:[108.13044,27.039822]},
					{name:'镇远县',value:[108.436581,27.054821]},
					{name:'三穗县',value:[108.681545,26.958666]},
					{name:'天柱县',value:[109.214446,26.915804]},
					{name:'剑河县',value:[108.447517,26.734048]},
					{name:'台江县',value:[108.328327,26.673824]},
					{name:'黎平县',value:[109.143567,26.236874]},
					{name:'锦屏县',value:[109.207438,26.682632]},
					{name:'榕江县',value:[108.527554,25.937725]},
					{name:'从江县',value:[108.911561,25.759881]},
				]
			}else if(sss === '黔南布依族苗族自治州'){
				app_user.$data.show = [
					{name:'都匀市',value:[107.525404,26.266118]},
					{name:'贵定县',value:[107.240554,26.59066]},
					{name:'荔波县',value:[107.893409,25.417098]},
					{name:'瓮安县',value:[107.477552,27.084126]},
					{name:'独山县',value:[107.551498,25.828288]},
					{name:'长顺县',value:[106.458421,26.028455]},
					{name:'龙里县',value:[106.986586,26.459081]},
					{name:'罗甸县',value:[106.758548,25.430838]},
					{name:'平塘县',value:[107.329567,25.828202]},
					{name:'惠水县',value:[106.663453,26.13821]},
					{name:'三都水族自治县',value:[107.876429,25.989479]},
					{name:'福泉市',value:[107.526433,26.692526]},
				]
			}else if(sss === '铜仁市'){
				app_user.$data.show = [
					{name:'思南县',value:[108.259417,27.944548]},
					{name:'江口县',value:[108.8454,27.705922]},
					{name:'铜仁市区',value:[109.196439,27.737786]},
					{name:'玉屏侗族自治县',value:[108.912578,27.241523]},
					{name:'德江县',value:[108.126411,28.270423]},
					{name:'石阡县',value:[108.230464,27.519722]},
					{name:'印江土家族苗族自治县',value:[108.416592,27.999823]},
					{name:'松桃苗族自治县',value:[109.209404,28.16042]},
					{name:'沿河土家族自治县',value:[108.510478,28.570102]},
					{name:'万山特区',value:[109.160312,27.677051]},
				]
			}else if(sss === '毕节市'){
				app_user.$data.show = [
					{name:'毕节市',value:[105.298589,27.290215]},
					{name:'黔西县',value:[105.298589,27.290215]},
					{name:'大方县',value:[105.618451,27.147061]},
					{name:'金沙县',value:[106.226442,27.465355]},
					{name:'织金县',value:[105.77759,26.669222]},
					{name:'赫章县',value:[104.710323,27.118776]},
					{name:'纳雍县',value:[105.389487,26.783717]},
					{name:'威宁彝族回族苗族自治县',value:[104.259481,26.879247]},
				]
			}else if(sss === 'hunan'){
				app_user.$data.show = [
					{name:'贵阳市',value:[106.636577,26.653325]},
					{name:'六盘水市',value:[105.483429,26.219214]},
					{name:'安顺市',value:[105.954417,26.259252]},
					{name:'遵义市',value:[107.037923,27.728325]},
					{name:'毕节市',value:[105.298589,27.290215]},
					{name:'铜仁市',value:[109.196439,27.737786]},
					{name:'黔南布依族苗族自治州',value:[107.525404,26.266118]},
					{name:'黔西南布依族苗族自治州',value:[104.902461,25.098113]},
					{name:'黔东南苗族侗族自治州',value:[108.822481,27.179902]},
				]
			}
			let vajw = [
					{name:'贵阳市',value:[106.636577,26.653325]},
					{name:'六盘水市',value:[105.483429,26.219214]},
					{name:'安顺市',value:[105.954417,26.259252]},
					{name:'遵义市',value:[107.037923,27.728325]},
					{name:'毕节市',value:[105.298589,27.290215]},
					{name:'铜仁市',value:[109.196439,27.737786]},
					{name:'黔南布依族苗族自治州',value:[107.525404,26.266118]},
					{name:'黔西南布依族苗族自治州',value:[104.902461,25.098113]},
					{name:'黔东南苗族侗族自治州',value:[108.822481,27.179902]},
				]
			for(let i = 0;i<vajw.length;i++){
				if(sss === vajw[i].name){
					app_user.$data.jwname = vajw[i]
				}else if(sss === 'hunan'){
					app_user.$data.jwname = {name:'贵阳市',value:[106.636577,26.653325]}
				}
			}
		}else{
			window.location.href="./xiangcun.html?name="+sss;
		}
		echarts.init(document.getElementById('main')).dispose();
		let sshsh = begin(sss)
		chart = echarts.init(document.getElementById('main'))
		chart.setOption(sshsh)
		if(sss === 'hunan' ){
			app_user.$data.sname = '贵州'
		}else{
			app_user.$data.sname = sss
		}
		chart.on('click', function (params) {
			console.log(params.name)
			if(params.name === '贵阳市' || params.name === '遵义市' || params.name === '六盘水市' || params.name === '安顺市' || params.name === '黔西南布依族苗族自治州' || params.name === '黔东南苗族侗族自治州' || params.name === '黔南布依族苗族自治州'  || params.name === '铜仁市' || params.name === '毕节市'){
				app_user.$data.sname = params.name
				er(params.name)
			}else{
				console.log(params)
				// window.location.href="./point2.html?name="+params.name;
				app_user.showmain = false
				creat(params.name,8)
			}
		    // var cout=params.data.name;
			// var subSystem = params.name;
		    //window.open('https://www.baidu.com');
		    // console.log(params);
			// dispose(params.name)
			// chart = ''
		});
		
		chart.on('mouseover', function (params) {
			app_user.$data.showcolor = params.name
		});
		chart.on('mouseout', function (params) {
			app_user.$data.showcolor = ''
		});
	}
	
	
	// prettier-ignore
	let dataAxis = ['贵阳', '遵义', '六盘水', '安顺', '黔西南', '黔东南', '黔南布', '铜仁', '毕节'];
	// prettier-ignore
	let data = [462.18, 619.21, 288.99, 231.35, 282.16, 348.54, 323.11, 312.24, 660.61];
	let yMax = 500;
	let dataShadow = [];
	for (let i = 0; i < data.length; i++) {
	  dataShadow.push(yMax);
	}
	options = {
	  title: {
	    text: '贵州各市人口比例',
		left: 'center',
		top: 0,
		textStyle: { // 标签的字体样式
		    color: '#ffffff', // 地图初始化区域字体颜色
		    fontSize: 20, // 字体大小
		    opacity: 1, // 字体透明度
		    backgroundColor:'#fff', // 字体背景色
		},
	    subtext: '单位：万/人'
	  },
	  xAxis: {
	    data: dataAxis,
	    axisLabel: {
	      inside: false,
	      color: '#ffffff'
	    },
	    axisTick: {
	      show: true
	    },
	    axisLine: {
	      show: false
	    },
	    z: 10
	  },
	  yAxis: {
	    axisLine: {
	      show: false
	    },
	    axisTick: {
	      show: false
	    },
	    axisLabel: {
	      color: '#ffffff'
	    }
	  },
	  dataZoom: [
	    {
	      type: 'inside'
	    }
	  ],
	  series: [
	    {
	      type: 'bar',
	      showBackground: true,
	      itemStyle: {
	        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	          { offset: 0, color: '#83bff6' },
	          { offset: 0.5, color: '#188df0' },
	          { offset: 1, color: '#188df0' }
	        ])
	      },
	      emphasis: {
	        itemStyle: {
	          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	            { offset: 0, color: '#2378f7' },
	            { offset: 0.7, color: '#2378f7' },
	            { offset: 1, color: '#83bff6' }
	          ])
	        }
	      },
	      data: data
	    }
	  ]
	};
	// Enable data zoom when user click bar.
	const zoomSize = 6;
	
	var myChart = echarts.init(document.getElementById('main-char'));
	
	myChart.setOption(options)
	myChart.on('click', function (params) {
	  console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
	  myChart.dispatchAction({
	    type: 'dataZoom',
	    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
	    endValue:
	      dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
	  });
	});
	
	
	// prettier-ignore
	let dataAxismian = ['贵阳', '遵义', '六盘水', '安顺', '黔西南', '黔东南', '黔南布', '铜仁', '毕节'];
	// prettier-ignore
	let datamian = [80.34,307.63,99.14, 92.67, 168.05, 300.39, 261.95, 180.03, 268.52];
	let yMaxmain = 3000;
	let dataShadowmain = [];
	for (let i = 0; i < datamian.length; i++) {
	  dataShadowmain.push(yMaxmain);
	}
	
	optionsmain = {
	  title: {
	    text: '贵州各市面积比例',
		left: 'center',
		top: 0,
		textStyle: { // 标签的字体样式
		    color: '#ffffff', // 地图初始化区域字体颜色
		    fontSize: 20, // 字体大小
		    opacity: 1, // 字体透明度
		    backgroundColor:'#fff', // 字体背景色
		},
	    subtext: '单位：平方万米*10'
	  },
	  xAxis: {
	    data: dataAxismian,
	    axisLabel: {
	      inside: false,
	      color: '#ffffff'
	    },
	    axisTick: {
	      show: true
	    },
	    axisLine: {
	      show: false
	    },
	    z: 10
	  },
	  yAxis: {
	    axisLine: {
	      show: false
	    },
	    axisTick: {
	      show: false
	    },
	    axisLabel: {
	      color: '#ffffff'
	    }
	  },
	  dataZoom: [
	    {
	      type: 'inside'
	    }
	  ],
	  series: [
	    {
	      type: 'bar',
	      showBackground: true,
	      itemStyle: {
	        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	          { offset: 0, color: '#83bff6' },
	          { offset: 0.5, color: '#188df0' },
	          { offset: 1, color: '#188df0' }
	        ])
	      },
	      emphasis: {
	        itemStyle: {
	          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	            { offset: 0, color: '#2378f7' },
	            { offset: 0.7, color: '#2378f7' },
	            { offset: 1, color: '#83bff6' }
	          ])
	        }
	      },
	      data: datamian
	    }
	  ]
	};
	// Enable data zoom when user click bar.
	const zoomSizemain = 6;
	
	var myChartmian = echarts.init(document.getElementById('main-char-mian'));
	
	myChartmian.setOption(optionsmain)
	myChartmian.on('click', function (params) {
	  console.log(dataAxismian[Math.max(params.dataIndex - zoomSizemain / 2, 0)]);
	  myChartmian.dispatchAction({
	    type: 'dataZoom',
	    startValue: dataAxismian[Math.max(params.dataIndex - zoomSizemain / 2, 0)],
	    endValue:
	      dataAxismian[Math.min(params.dataIndex + zoomSizemain / 2, data.length - 1)]
	  });
	});
	
	
	
	// prettier-ignore
	let dataAxismian3 = ['贵阳', '遵义', '六盘水', '安顺', '黔西南', '黔东南', '黔南布', '铜仁', '毕节'];
	// prettier-ignore
	let datamian3 = [461.165,372.005,133.962, 99.675, 135.34, 119.152, 159.54, 132.779, 202.039];
	let yMaxmain3 = 500;
	let dataShadowmain3 = [];
	for (let i = 0; i < datamian3.length; i++) {
	  dataShadowmain3.push(yMaxmain3);
	}
	optionsmain3 = {
	  title: {
	    text: '贵州各市GDP比例',
		left: 'center',
		top: 0,
		textStyle: { // 标签的字体样式
		    color: '#ffffff', // 地图初始化区域字体颜色
		    fontSize: 20, // 字体大小
		    opacity: 1, // 字体透明度
		    backgroundColor:'#fff', // 字体背景色
		},
	    subtext: '单位：十亿元'
	  },
	  xAxis: {
	    data: dataAxismian3,
	    axisLabel: {
	      inside: false,
	      color: '#ffffff'
	    },
	    axisTick: {
	      show: true
	    },
	    axisLine: {
	      show: false
	    },
	    z: 10
	  },
	  yAxis: {
	    axisLine: {
	      show: false
	    },
	    axisTick: {
	      show: false
	    },
	    axisLabel: {
	      color: '#ffffff'
	    }
	  },
	  dataZoom: [
	    {
	      type: 'inside'
	    }
	  ],
	  series: [
	    {
	      type: 'bar',
	      showBackground: true,
	      itemStyle: {
	        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	          { offset: 0, color: '#83bff6' },
	          { offset: 0.5, color: '#188df0' },
	          { offset: 1, color: '#188df0' }
	        ])
	      },
	      emphasis: {
	        itemStyle: {
	          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	            { offset: 0, color: '#2378f7' },
	            { offset: 0.7, color: '#2378f7' },
	            { offset: 1, color: '#83bff6' }
	          ])
	        }
	      },
	      data: datamian3
	    }
	  ]
	};
	// Enable data zoom when user click bar.
	const zoomSizemain3 = 6;
	
	var myChartmian3 = echarts.init(document.getElementById('main-char-3'));
	
	myChartmian3.setOption(optionsmain3)
	myChartmian3.on('click', function (params) {
	  console.log(dataAxismian3[Math.max(params.dataIndex - zoomSizemain3 / 2, 0)]);
	  myChartmian3.dispatchAction({
	    type: 'dataZoom',
	    startValue: dataAxismian3[Math.max(params.dataIndex - zoomSizemain3 / 2, 0)],
	    endValue:
	      dataAxismian3[Math.min(params.dataIndex + zoomSizemain3 / 2, data.length - 1)]
	  });
	});
	
	
	
	
	
	
	
	var map = new AMap.Map('container', {
		    resizeEnable: true,
		    zoom: 8,
		    center:[106.636577,26.653325],
		    layers:[
		        new AMap.TileLayer.RoadNet({
		            zIndex:20
		        }),
		        new AMap.TileLayer({
		            zIndex:6,
		            opacity:1,
		            getTileUrl:'https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=ter_w&x=[x]&y=[y]&l=[z]'
		            })]
		});
		
	function creat(reals,ee){
		
		
		new AMap.DistrictSearch({
		    extensions:'all',
		    subdistrict:0
		}).search(reals,function(status,result){
			console.log(result)
		    // 外多边形坐标数组和内多边形坐标数组
		    var outer = [
		        new AMap.LngLat(-360,90,true),
		        new AMap.LngLat(-360,-90,true),
		        new AMap.LngLat(360,-90,true),
		        new AMap.LngLat(360,90,true),
		    ];
		    var holes = result.districtList[0].boundaries
		
		    var pathArray = [
		        outer
		    ];
			var maskerIn = new AMap.Marker({
				position:[106.636577,26.653325],
				map:map
			})
			
			maskerIn.on('click',function(e){
				destroyMap()
				setTimeout(function() {
					map = new AMap.Map('container', {
					    resizeEnable: true,
					    zoom: ee,
					    center:[106.636577,26.653325],
					    layers:[
					        new AMap.TileLayer.RoadNet({
					            zIndex:20
					        }),
					        new AMap.TileLayer({
					            zIndex:6,
					            opacity:1,
					            getTileUrl:'https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=ter_w&x=[x]&y=[y]&l=[z]'
					            })]
					});
					creat('贵阳',10)
				}, 10);					
			})
			
		    pathArray.push.apply(pathArray,holes)
		    var polygon = new AMap.Polygon( {
		        pathL:pathArray,
		        strokeColor: '#00eeff',
		        strokeWeight: 1,
		        fillColor: '#71B3ff',
		        fillOpacity: 1
		    });
		    polygon.setPath(pathArray);
		    map.add(polygon)
		})
	}
	function destroyMap() {
	     map && map.destroy();
	     // log.info("地图已销毁");
	   }
</script>
</body>
</html>